
import ElementPlus, { ElDialog } from 'element-plus'
import { createApp, ref, h } from 'vue'

export function createPromiseDialog(component) {
  return () => {
    return new Promise((resolve, reject) => {
      const visible = ref(true)

      // 组件销毁函数
      function destroy() {
        visible.value = false
        setTimeout(() => {
          dialogApp.unmount()
          if (!el) return
          el.parentNode && el.parentNode.removeChild(el)
          el = null
        }, 500)
        
      }

      // 创建dialog实例
      const dialogApp = createApp({
        render(params) {
          return h(
            ElDialog,
            { 
              modelValue: visible.value, 
              // 关闭事件
              onClose() {
                reject({ type: 'dialogClose' })
                destroy()
              }
            },
            () => h(component, {
              // 自定义事件, 确定
              onOk(data) {
                resolve(data)
                destroy()
              },
              // 自定义事件, 取消
              onCancel() {
                reject({type: 'dialogCancel' })
                destroy()
              },
            })
          )
        }
      })
        .use(ElementPlus);
      // 创建挂载节点
      let el = document.createElement('div')
      // 挂载，插入body
      document.body.appendChild(el)
      dialogApp.mount(el)
    })
  }
}
